<template>
  <div class="checkbox-tree">
    <el-tree
      :data="treeData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="['1', '2']"
      :props="defaultProps"
      @check-change="handleCheckChange"
    />
    <div class="button-group">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleSelectAll">全选</el-button>
      <el-button @click="handleUnselectAll">取消全选</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const treeData = ref([
  {
    id: "1",
    label: "会员管理",
    children: [
      {
        id: "1-1",
        label: "微信用户列表",
        children: [
          { id: "1-1-1", label: "查看列表" },
          { id: "1-1-2", label: "普通数据" },
          { id: "1-1-3", label: "敏感数据" },
        ],
      },
      {
        id: "1-2",
        label: "注册用户管理",
        children: [
          { id: "1-2-1", label: "查看列表" },
          { id: "1-2-2", label: "普通数据" },
          { id: "1-2-3", label: "删除数据" },
          { id: "1-2-4", label: "创建提交" },
          { id: "1-2-5", label: "编辑数据" },
          { id: "1-2-6", label: "编辑提交" },
          { id: "1-2-7", label: "选择导出" },
          { id: "1-2-8", label: "查询导出" },
          { id: "1-2-9", label: "修改余额" },
          { id: "1-2-10", label: "修改余额提交" },
          { id: "1-2-11", label: "修改积分" },
          { id: "1-2-12", label: "修改积分提交" },
          { id: "1-2-13", label: "余额详情列表" },
          { id: "1-2-14", label: "余额详情" },
          { id: "1-2-15", label: "查看列表" },
          { id: "1-2-16", label: "余额详情" },
          { id: "1-2-17", label: "设置邮寄标志" },
        ],
      },
      {
        id: "1-3",
        label: "用户等级",
        children: [
          { id: "1-3-1", label: "查看列表" },
          { id: "1-3-2", label: "普通数据" },
          { id: "1-3-3", label: "创建数据" },
          { id: "1-3-4", label: "创建提交" },
          { id: "1-3-5", label: "编辑数据" },
          { id: "1-3-6", label: "编辑提交" },
          { id: "1-3-7", label: "单选删除" },
          { id: "1-3-8", label: "预览数据" },
          { id: "1-3-9", label: "设置宣言默认" },
        ],
      },
    ],
  },
  {
    id: "2",
    label: "订单管理",
    children: [
      {
        id: "2-1",
        label: "普通订单列表",
        children: [
          { id: "2-1-1", label: "查看列表" },
          { id: "2-1-2", label: "普通数据" },
          { id: "2-1-3", label: "编辑数据" },
          { id: "2-1-4", label: "编辑提交" },
          { id: "2-1-5", label: "发货" },
        ],
      },
    ],
  },
]);

const defaultProps = {
  children: "children",
  label: "label",
};

const treeRef = ref(null);

const handleCheckChange = (data, checked, indeterminate) => {
  console.log(data.id, checked, indeterminate);
};

const handleSave = () => {
  const checkedNodes = treeRef.value.getCheckedNodes();
  const checkedKeys = treeRef.value.getCheckedKeys();
  console.log("Checked nodes:", checkedNodes);
  console.log("Checked keys:", checkedKeys);
  ElMessage.success("保存成功");
};

const handleSelectAll = () => {
  treeRef.value.setCheckedNodes(treeData.value);
};

const handleUnselectAll = () => {
  treeRef.value.setCheckedKeys([]);
};
</script>

<style scoped>
.checkbox-tree {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.button-group {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
</style>
